<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-23 10:40:50
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-25 10:26:34
 * @FilePath: \uni-preset-vue-vite-ts\src\pages\home\search\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="Search_contianer">
        <div class="search_main">
            <div class="header_search">
                <view class="box-bg">
                    <uni-nav-bar height="110px" backgroundColor="#1BA9BA;" :border="false" left-icon="left"
                        :title="LoadData.departureStation + '-' + LoadData.arrivalStation" @clickLeft="back" color="#fff" />
                </view>
            </div>
            <div class="main">
                <div class="main_header">
                    <span>前一天</span>
                    <span>{{ LoadData.dataTime }}</span>
                    <span>后一天</span>
                </div>
                <div class="main_container">
                    <div class="train_list" v-for="(item, index) in TrainList.list" :key="index">
                        <div class="train_left">
                            <span>{{ formatTime(item.departureTime) }}</span>
                            <span class="leftTime">{{ formatTime(item.arrivalTime) }}</span>

                        </div>
                        <div class="train_startend">
                            <div class="startendDiv"><span class="start">始</span> {{ item.departureStation }}</div>
                            <div class="startendDiv"><span class="end">终</span>{{ item.arrivalStation }}</div>
                        </div>
                        <div class="train_center">
                            <span class="center_span">{{ item.trainNumber }}</span>
                            <span>{{ item.duration }}</span>
                        </div>
                        <div class="train_right">
                            <span class="right_color">{{ item.price }}</span>
                            <span class="right_color">{{ item.status }}</span>
                        </div>
                    </div>
                </div>
                <div class="main_footer">
                    <dl :class="{ active: SerarchTab.index == index }" v-for="(item, index) in SerarchTab.list" :key="index"
                        @click="() => TabSeact(index)">
                        <dt><img class="tabImg" :src="SerarchTab.index == index ? item.iconsrc : item.src" alt=""></dt>
                        <dd>{{ item.title }}</dd>
                    </dl>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";
import { useTrainStore } from '@/modules/train'
let indexs = 0
const SerarchTab: any = reactive({
    list: [
        {
            src: "../../../static/PNG/1x/SearchTag/时间.png",
            iconsrc: "../../../static/PNG/1x/SearchTag/时间 (1).png",
            title: "耗时 短 → 长"
        },
        {
            src: "../../../static/PNG/1x/SearchTag/train.png",
            iconsrc: "../../../static/PNG/1x/SearchTag/train (1).png",
            title: "只看高铁动车"
        },
        {
            src: "../../../static/PNG/1x/SearchTag/开票内容.png",
            iconsrc: "../../../static/PNG/1x/SearchTag/开票内容 (1).png",
            title: "只看有票"
        },
    ],
    index: "0"
})
// arrivalStation: "天津"
// arrivalTime: "2023-10-27 16:20:00"
// departureStation: "北京"
// departureTime: "2023-10-27 14:30:00"
// duration: "1小时50分钟"
// price: "￥52.5"
// status: "有票"
// trainNumber: "K2345"
// trainType: "普通快速"
const TrainStore = useTrainStore()
const LoadData = reactive({
    departureStation: "",
    arrivalStation: "",
    dataTime: "",
    type: "get"
})
const TrainList: any = reactive({
    list: [],
})


onLoad((options: any) => {
    console.log(options, "options")
    LoadData.departureStation = options.departure
    LoadData.arrivalStation = options.arrival
    LoadData.dataTime = options.date
    GetTrainData()
})
const GetTrainData = () => {
    TrainStore.getTrani(LoadData)
    TrainList.list = TrainStore.count
    console.log(TrainList.list, "list")
}


const back = () => {
    uni.navigateBack({
        delta: 1
    })
}

const TabSeact = (index: any) => {

    SerarchTab.index = index
    if (index == 0) {
        indexs += 1
        if (indexs % 2 == 0) {
            SerarchTab.list[index].title = "耗时 短 → 长"
            console.log(new Date(SerarchTab.list[index].duration))
        }
    } else {

        SerarchTab.list[index].title = "耗时 长 ← 短"

    }

}


// 格式化时间
const formatTime = (timeString: string) => {
    // 处理IOS的警告
    /* VM634:9 at u (http://127.0.0.1:53431/appservice/pages/home/search/index.js:57:19)
new Date("2023-10-27 14:30:00") 在部分 iOS 下无法正常使用，iOS 只支持 "yyyy/MM/dd"、"yyyy/MM/dd HH:mm:ss"、"yyyy-MM-dd"、"yyyy-MM-ddTHH:mm:ss"、"yyyy-MM-ddTHH:mm:ss+HH:mm" 的格式 */
    const formattedDateString = timeString.replace(/-/g, "/");

    const date = new Date(formattedDateString);
    const hours = date.getHours();
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${hours}:${minutes}`;
};
</script>

<style scoped lang="scss">
.Search_contianer {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    position: relative;

    .search_main {
        width: 97%;
        height: 97%;
        position: absolute;
        border: solid 1px #e8e8e8;
        left: 13rpx;
        top: 20rpx;
        position: relative;



        .header_search {
            width: 100%;
            height: 200rpx;

        }

        .main {
            width: 95%;
            margin: 10px auto;



            .main_header {
                width: 100%;
                height: 50rpx;
                display: flex;
                justify-content: space-between;
                color: #1BA9BA;
            }

            .main_container {
                width: 100%;

                .train_list {
                    width: 100%;
                    height: 140rpx;
                    background-color: #fff;
                    align-items: center;
                    display: flex;
                    border-bottom: solid 1px #e8e8e8;

                    .train_left {
                        width: 130rpx;
                        height: 92%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;

                        .leftTime {
                            width: 100%;
                        }
                    }

                    .train_startend {
                        width: 220rpx;
                        height: 92%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;

                        .startendDiv {
                            width: 100%;

                            .start {
                                width: 35rpx;
                                height: 35rpx;
                                line-height: 35rpx;
                                text-align: center;
                                margin-right: 10rpx;
                                display: inline-block;
                                border: solid 1px #1BA9BA;
                                color: #1BA9BA;
                                border-radius: 50%;
                            }

                            .end {
                                width: 35rpx;
                                height: 35rpx;
                                text-align: center;
                                line-height: 35rpx;
                                margin-right: 10rpx;
                                display: inline-block;
                                color: #3BC9A9;
                                border-radius: 50%;
                                border: solid 1px #3BC9A9;
                            }
                        }
                    }

                    .train_center {
                        width: 220rpx;
                        height: 92%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;

                        .center_span {
                            display: inline-block;
                            width: 100%;
                        }
                    }

                    .train_right {
                        width: 120rpx;
                        height: 92%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        text-align: right;

                        .right_color {
                            width: 100%;
                            color: #FF8D41;
                        }
                    }
                }
            }

            .main_footer {
                width: 100%;
                height: 100rpx;
                position: absolute;
                border: solid 1px #e8e8e8;
                bottom: 0;
                left: 0;
                display: flex;
                justify-content: space-around;
                text-align: center;
                color: #8b8b8b;

                .tabImg {
                    width: 50rpx;
                    height: 50rpx;
                }
            }

            .main_footer .active {
                color: #1BA9BA;
            }
        }
    }
}
</style>